<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
</head>
<style>
    * {
        margin: 0;
        padding: 0;
    }

    input {
        width: 250px;
        height: 40px;
        font-size: 20px
    }

    button {
        width: 200px;
        height: 40px;
    }

    table {
        margin-top: 20px;
        border: 1px solid black;
        border-collapse: collapse;
    }

    tr,
    th,
    td {
        width: 200px;
        height: 40px;
        text-align: center;
        border: 1px solid black;
    }

    /* tr:nth-child(odd){
        background: yellow;
    }
    tr:nth-child(even){
        background: blue;
    } */
    hr {
        margin-top: 20px;
        margin-bottom: 20px;
    }
</style>

<body>
    <input type="text" placeholder="姓名：">
    <input type="text" placeholder="年龄：">
    <input type="text" placeholder="性别：">
    <input type="text" placeholder="电话：">
    <input type="text" placeholder="民族：">
    <input type="text" placeholder="邮箱：">
    <button>提交</button>
    <hr>
    <input type="text" placeholder="输入你要搜索的名字">
    <button>搜索</button>
    <table>
        <thead>
            <tr>
                <th>姓名</th>
                <th>年龄</th>
                <th>性别</th>
                <th>电话</th>
                <th>民族</th>
                <th>邮箱</th>
                <th>操作</th>
            </tr>
        </thead>
        <tbody></tbody>
    </table>
</body>
<script>
    $(function () {

        // 提交按钮
        $('button:first').keydown(function () {
            // input 框里的值
            var name = $('input:eq(0)').val(),
                age = $('input:eq(1)').val(),
                gender = $('input:eq(2)').val(),
                phone = $('input:eq(3)').val(),
                ethnicGroup = $('input:eq(4)').val(),
                mailbox = $('input:eq(5)').val()
            // var i = 1
            var str = `<tr id='tis'>
                            <td>${name}</td>
                            <td>${age}</td>
                            <td>${gender}</td>
                            <td>${phone}</td>
                            <td>${ethnicGroup}</td>
                            <td>${mailbox}</td>
                            <td><a href='#'>编辑</a>&emsp;|&emsp;<a href='#'>删除</a></td>
                        </tr>`
            $('tbody').append(str)
            localStorage.setItem('data', str)
        // 搜索
        
        
        // 删除
        $('a:last').click(function () {
            $('tr').eq(1).remove()
        })
        })
        

    })
</script>

</html>